<template>
  <div class="home">
    <!-- 顶部导航 -->
    <NavBar>
      <div slot="left_slot" class="main_left flex-top-left">
        <van-icon name="wap-nav" size="0.4rem" @click="show_leftNavBar" />
      </div>
      <div slot="center_slot" class="main_center flex-top-left">
        <div class="logo_img">
          <img :src="is_Home_NavBar.logoImg" alt="logo" srcset="" />
        </div>
      </div>
    </NavBar>
    <!-- 侧边栏 -->
    <LeftNavBar ref="left_NavBar" />
    <div class="home_infoContainer" :class="{ showTar: is_show }">
      <!-- 主要天气信息 -->
      <WeatherMainInfo />
      <!-- 未来24小时天气预告 -->
      <HoursMainInfo />
      <!-- 7日天气预告 -->
      <SevenWeatherInfo />
      <!-- 实时空气质量 -->
      <AirMainInfo />
      <!-- 百度map -->
      <BaiduMap />
      <!-- 生活指数 -->
      <LifeIndex />
      <!-- Footer -->
      <Bottom_footer />
    </div>
    <!-- 弹窗 -->
    <Popup />
  </div>
</template>
<script>
import NavBar from "../components/common/navBar/NavBar";
import WeatherMainInfo from "../components/content/weatherMainInfo/WeatherMainInfo";
import HoursMainInfo from "../components/content/hoursMainInfo/hoursMainInfo";
import SevenWeatherInfo from "../components/content/sevenWeatherInfo/SevenWeatherInfo";
import AirMainInfo from "../components/content/airMainInfo/AirMainInfo";
import LeftNavBar from "../components/content/leftNavBar/LeftNavBar";
import BaiduMap from "../components/content/baiduMap/BaiduMap";
import LifeIndex from "../components/content/lifeIndex/LifeIndex";
import Bottom_footer from "../components/content/footer/Footer";
import Popup from "../components/content/popup/Popup";
//
import { mapActions, mapState } from "vuex";
export default {
  name: "Home",
  components: {
    NavBar,
    WeatherMainInfo,
    HoursMainInfo,
    SevenWeatherInfo,
    AirMainInfo,
    LeftNavBar,
    BaiduMap,
    LifeIndex,
    Bottom_footer,
    Popup,
  },
  data() {
    return {
      is_popupArr: [],
      is_Home_NavBar: {
        logoImg: require("../assets/img/logo.png"),
      },
    };
  },
  computed: {
    ...mapState(["isCityPosition", "is_show", "detailCardData"]),
  },
  methods: {
    ...mapActions(["getGeoPosition", "getWeather"]),
    // 开启侧边栏
    show_leftNavBar() {
      this.$refs.left_NavBar.switch_leftNavBar();
    },
    cardItemClick(index) {
      this.is_popupArr = this.detailCardData[index];
    },
  },
};
</script>

<style scoped>
.home {
  width: 100%;
  height: auto;
  min-height: 100vh;
}
.home_infoContainer {
  padding: 0.15rem 0.16rem;
  transition: all 0.25s ease-in-out;
  transform: scale(1);
}
.showTar {
  transform: scale(0.97);
}
/* navBar */
.logo_img {
  /* width: 0.4rem; */
  width: 0.5rem;
}
.main_left,
.main_center {
  width: 100%;
  height: 100%;
}
.main_left img {
  width: 40%;
}
</style>